Add asset pipeline: CSS optimization, AVIF images, fingerprinting#105
Merged
Add asset pipeline: CSS optimization, AVIF images, fingerprinting#105
Conversation
Co-authored-by: benkutil <228373+benkutil@users.noreply.github.com>
Deploying benkutil-github-io with
|
| Latest commit: |
b80b797
|
| Status: | ✅ Deploy successful! |
| Preview URL: | https://ed7fbbe6.benkutil-github-io.pages.dev |
| Branch Preview URL: | https://copilot-add-assets-pipeline.benkutil-github-io.pages.dev |
Co-authored-by: benkutil <228373+benkutil@users.noreply.github.com>
Co-authored-by: benkutil <228373+benkutil@users.noreply.github.com>
Co-authored-by: benkutil <228373+benkutil@users.noreply.github.com>
Co-authored-by: benkutil <228373+benkutil@users.noreply.github.com>
Copilot
AI
changed the title
[WIP] Add asset pipeline for improved performance
Add asset pipeline: CSS optimization, AVIF images, fingerprinting
Feb 2, 2026
Owner
|
@copilot help me resolve these merge conflicts. |
Copilot stopped work on behalf of
benkutil due to an error
February 2, 2026 21:42
There was a problem hiding this comment.
Pull request overview
This PR implements a comprehensive build-time asset optimization pipeline to improve site performance through CSS minification, modern image format support, and cache-busting fingerprints. The changes introduce PostCSS processing with autoprefixer and cssnano for CSS optimization, AVIF image format support with progressive fallbacks, and MD5-based asset fingerprinting for efficient browser caching.
Changes:
- CSS pipeline with PostCSS minification (27% reduction: 15KB→11KB) and autoprefixing in production mode
- Image optimization with AVIF/WebP/JPEG fallback chain and responsive widths
- Asset fingerprinting using MD5 hashes for cache busting (production only)
- Security fix replacing
html-minifierwithhtml-minifier-terser
Reviewed changes
Copilot reviewed 7 out of 8 changed files in this pull request and generated 3 comments.
Show a summary per file
| File | Description |
|---|---|
| package.json | Added PostCSS, autoprefixer, cssnano dependencies and replaced html-minifier with html-minifier-terser |
| eslint.config.js | Added console global for build script logging |
| _build/process-css.js | New CSS processing script with PostCSS pipeline for minification and autoprefixing |
| _build/fingerprint-assets.js | New asset fingerprinting script generating MD5-hashed filenames and manifest |
| _build/Readme.md | Comprehensive documentation for the asset pipeline implementation |
| Readme.md | Updated main README with build commands and asset pipeline overview |
| .eleventy.js | Integrated CSS processing, fingerprinting hooks, AVIF support, and webmentions token validation |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
_build/Readme.md
Outdated
|
|
||
| - Minifies CSS with cssnano | ||
| - Adds vendor prefixes with autoprefixer | ||
| - Reduces file size by ~78% (51KB → 11KB) |
There was a problem hiding this comment.
The file size reduction percentage is inconsistent with the PR description which states '27% (15KB→11KB)'. The calculation for 51KB→11KB would be ~78%, but this contradicts the 15KB→11KB reduction mentioned elsewhere. Please verify and align the actual file size metrics.
Suggested change
| - Reduces file size by ~78% (51KB → 11KB) | |
| - Reduces file size by ~27% (15KB → 11KB) |
Contributor
Author
There was a problem hiding this comment.
Fixed in commit 8d96885. Corrected metrics to actual measurements: 14KB → 11KB (24% reduction).
_build/Readme.md
Outdated
Comment on lines
66
to
68
| - **Before:** 745 lines, ~51KB unminified | ||
| - **After:** 1 line, ~11KB minified | ||
| - **Savings:** ~78% reduction in file size |
There was a problem hiding this comment.
The CSS size metrics (51KB→11KB) conflict with the PR description stating '15KB→11KB'. This inconsistency could confuse users about actual performance improvements.
Contributor
Author
There was a problem hiding this comment.
Fixed in commit 8d96885. Updated to accurate measurements from build output.
Readme.md
Outdated
|
|
||
| The asset pipeline delivers significant improvements: | ||
|
|
||
| - **CSS:** 745 lines → 1 line, ~78% file size reduction |
There was a problem hiding this comment.
The CSS reduction percentage (~78%) conflicts with the PR title and description which state '27%'. Verify the actual reduction and ensure consistency across all documentation.
Contributor
Author
There was a problem hiding this comment.
Fixed in commit 8d96885. All documentation now consistently shows 24% reduction (14KB → 11KB).
Owner
|
@copilot the Cloudflare pipeline fails with the following error: |
Co-authored-by: benkutil <228373+benkutil@users.noreply.github.com>
Co-authored-by: benkutil <228373+benkutil@users.noreply.github.com>
Contributor
Author
... Fixed in commit 28e2b54. The Cloudflare build was failing because it detected Node 16.18.1 but the project requires Node 20. I've added three mechanisms to ensure Cloudflare uses Node 20:
This should resolve the build failure. The next Cloudflare build should use Node 20 as required. |
Co-authored-by: benkutil <228373+benkutil@users.noreply.github.com>
Owner
|
@copilot build fails with this error: |
Co-authored-by: benkutil <228373+benkutil@users.noreply.github.com>
Contributor
Author
... Fixed in commit d648a4a. The issue was that Cloudflare Pages wasn't reading the version files properly when they just contained "20". I've updated both The next Cloudflare build should now use Node 20.11.0 as required by the project. |
Owner
|
@copilot Fix this build error. Make sure tests are still validating quality after fix: |
Co-authored-by: benkutil <228373+benkutil@users.noreply.github.com>
Contributor
Author
Fixed in commit b80b797. The ESLint error occurred because Renamed All tests now pass:
Quality validation is maintained through all linting and build steps. |
benkutil
approved these changes
Feb 3, 2026
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Description
Implements build-time asset optimization pipeline for improved performance and caching. CSS minified 24% (14KB→11KB), modern image formats (AVIF→WebP→JPEG), MD5 fingerprinting for cache busting.
Changes Made
CSS Pipeline (
_build/process-css.js)Image Optimization (
.eleventy.js)Asset Fingerprinting (
_build/fingerprint-assets.js)tufte.css→tufte.d3c7f3e8.cssSecurity Fix
html-minifier→html-minifier-terserBuild Integration
eleventy.beforehook for CSS processingeleventy.afterhook for fingerprintingDeployment Configuration
.node-versionfile with explicit version 20.11.0 for Cloudflare Pages compatibility.nvmrcfile with version 20.11.0enginesfield to package.json requiring Node >=20.0.0ESLint Configuration Fix
eslint.config.jstoeslint.config.mjsto support ES module syntaxDocumentation Fixes
_build/Readme.mdand mainReadme.mdwith consistent performance metricsChecklist
npm run build:prod)npm start)Screenshots (if applicable)
Build output showing optimizations:
Asset sizes:
CI/Quality verification:
Original prompt
This section details on the original issue you should resolve
<issue_title>add assets pipeline</issue_title>
<issue_description>## context
Optimize performance for a better user experience.
Proposed plan
Recommendations for Asset Pipeline:
benkutil/benkutil.github.ioFor improving the static assets (CSS, JavaScript, Images, etc.) in your Eleventy-powered repository, implementing an asset pipeline is crucial for optimizing performance, usability, and maintainability. Here's a detailed set of recommendations tailored for
benkutil/benkutil.github.io:1. CSS Pipeline
Tools to Use:
PostCSS:
autoprefixer: Automatically add vendor prefixes for cross-browser compatibility.cssnano: Minify CSS to reduce file size without losing functionality.Critical CSS:
Purging Unused CSS:
Example Workflow:
2. JavaScript Pipeline
Tools to Use:
Bundling:
Minification:
Example Workflow:
3. Image Optimization
Tools to Use:
Plugins for Eleventy:
Workflow:
Add an NPM script for image optimization:
Use the Eleventy plugin to generate responsive image sets.
4. HTML and Template Optimization
Tools to Use:
5. Static Compression
Tools to Use:
6. Automation and CI Integration
GitHub Actions for Automated Asset Pipeline:
Example Workflow (
.github/workflows/asset-pipeline.yml):7. Caching and Versioning
Asset Fingerprinting:
main.abc123.js) for cache busting.Eleventy Cache Plugin:
8. Continuous Performance Metrics
Example Asset Pipeline Summary
💡 You can make Copilot smarter by setting up custom instructions, customizing its development environment and configuring Model Context Protocol (MCP) servers. Learn more Copilot coding agent tips in the docs.